<template>
  <div class="container">
    <!--  主题内容标题   -->
    <div class="flex contain-header">
      <div class="contain-title">帖子管理</div>
      <div class="flex contain-left" @click="addPost">
        <div><icon-svg name="iconadd-dashboard" class="nav-icon" /></div>
        <div class="add">新增</div>
      </div>
    </div>
    <!--  查询    -->
    <a-form class="form" :form="form" @submit="handleSearch">
      <a-row :gutter="24">
        <a-col
          :span="24"
          class="margin-bottom"
        >
          <div class="flex-center">
            <a-col :span="2">
              标题：
            </a-col>
            <a-col :span="4">
              <a-input placeholder="请输入标题" name="title" v-model="title"/>
            </a-col>
            <a-col :span="2">
              时间：
            </a-col>
            <a-col :span="6">
              <a-date-picker @change="onChange" format="YYYY/MM/DD" v-model="date"/>
            </a-col>
            <a-col :span="3">
              <a-button type="primary" html-type="submit" icon="search" :style="{'background-color': '#54aef2',border: 'none'}">
                查询
              </a-button>
            </a-col>
          </div>
        </a-col>
      </a-row>
    </a-form>

    <!--  表格头部标签页  -->
    <div class="tag-page">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="全部">
          <a-table :columns="columns" :data-source="data" :loading="isLoading" :pagination="pagination" bordered class="column">
            <!--    表格操作列内容        -->
            <template slot="isAnonymous" slot-scope="text, record, index">
              {{ text ? '是' : '否' }}
            </template>
            <template slot="operation" slot-scope="text, record, index">
              <div class="editable-row-operations">
               <span class="oper">
                 <div class="flex icon-flex">
<!--                    <a @click="() => editPost(record,text)" class="flex edit"><icon-svg name="iconbianji" class="icon-oper" />编辑</a>-->
                    <a-popconfirm title="是否确定删除?" cancelText="取消" okText="确定" @confirm="() => deletePost(record)">
                      <a class="flex delete"><icon-svg name="iconshanchu" class="icon-oper" />删除</a>
                    </a-popconfirm>
                 </div>
                </span>
              </div>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </div>

    <!--  新增弹窗  -->
<!--    <action-modal :modalVisible.sync="isShowModal" :data.sync="modalData" :title="modalTitle"></action-modal>-->
  </div>
</template>

<script>
  import {getUserPostList,deletePost} from '@/api'
  // import ActionModal from "../../components/Modal/ActionModal";
  const columns = [
    {
      title: '标题',
      dataIndex: 'postTitle',
      width: '22%',
      ellipsis: true,
      align: 'center'
    },
    {
      title: '内容',
      dataIndex: 'postText',
      width: '20%',
      ellipsis: true,
      align: 'center'
    },
    {
      title: '热度',
      dataIndex: 'postHot',
      width: '11%',
      ellipsis: true,
      align: 'center'
    },
    {
      title: '是否匿名',
      dataIndex: 'isAnonymous',
      width: '11%',
      ellipsis: true,
      align: 'center',
      scopedSlots: { customRender: 'isAnonymous' },
    },
    {
      title: '发布时间',
      dataIndex: 'createTime',
      width: '18%',
      ellipsis: true,
      align: 'center'
    },
    {
      title: '操作',
      dataIndex: 'operation',
      align: 'center',
      scopedSlots: { customRender: 'operation' },
    },
  ];
  export default {
    name: "Invitation.vue",
    data() {
      return{
        label: [
          {
            title: '标题',
            placeholder: '请输入标题',
            name: 'c_name'
          }
        ],
        form: this.$form.createForm(this, { name: 'advanced_search' }),
        data: [],
        columns,
        isLoading: false, //表格分页加载
        pagination:{
          total:0,
          defaultPageSize:10,
          showTotal: total => `共 ${total} 条数据`,
          showQuickJumper: true,
          showSizeChanger:true,
          pageSizeOptions: ['5', '10', '15', '20'],
          onChange:(page,pageSize)=>this.getPostsList(page,pageSize),//点击页码事件
        },
        isShowModal: false,
        modalTitle: '',
        modalData: [],
        title: '',
        date: ''
      }
    },
    components: {
      // ActionModal
    },
    created() {
      //帖子分页查询
      this.getPostsList()
    },
    methods: {
      //条件查询列表
      //表单查询
      handleSearch(e) {
        e.preventDefault()
        this.getPostsList()
      },
      //时间
      onChange(dates, dateStrings) {
        console.log('From: ', dates[0], ', to: ', dates[1]);
        console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
      },
      //获取帖子列表
      getPostsList(pageNum=1, pageSize=20){
        this.isLoading = true
        this.pageNum = pageNum
        let time
        if (this.date) {
          time = JSON.stringify(this.$moment(this.date).format('YYYY-MM-DD'))
        } else {
          time = this.date
        }
        let params = {
          pageNum: pageNum,
          pageSize: pageSize,
          userName: window.localStorage.getItem('userName'),
          postTime: time,
          postTitle: this.title
        }
        getUserPostList(params)
          .then((res) => {
            if (res.status == 200){
              this.data = res.data.list
              this.pagination.total = res.data.total
              this.isLoading = false
            }
            else{
              this.$message.info(res.msg)
            }
          })
      },
      //删除帖子
      deletePost(item) {
        // let params = {
        //   postId: 10
        // }
        deletePost({postId: item.postId})
            .then((res) => {
              if (res.status == 200){
                this.$message.success('删除帖子成功！')
                this.getPostsList()
              }
              else{
                this.$message.info(res.msg)
              }
            })
      },
      //添加帖子
      addPost() {
        this.$router.push('/post')
      }
      //新增课件
      // addCourseweare(){
      //   this.isShowModal = true
      //   this.modalTitle = '发布课件'
      //   let data = [
      //     {
      //       label: '类型',
      //       name: 'eWorkshop'
      //     },
      //     {
      //       label: '标题',
      //       name: 'eMachine'
      //     },
      //     {
      //       label: '主讲人',
      //       name: 'eName'
      //     },
      //     {
      //       label: '专业',
      //       name: 'eCode'
      //     },
      //     {
      //       label: '封面',
      //       name: 'eType'
      //     },
      //     {
      //       label: '课件上传',
      //       name: 'eType'
      //     },
      //     {
      //       label: '评价',
      //       name: 'eType'
      //     },
      //   ]
      //   this.modalData.createData = data
      // }
    }
  }
</script>

<style scoped>
  .flex{
    display: flex;
    flex-direction: row;
  }
  .container{
    width: 1032px;
    height: 100%;
    background-color: #ffffff;
    border-radius: 4px;
    border: 1px solid #eeeeee;
    padding: 5px 13px;
  }
  .contain-header{
    justify-content: space-between;
    align-items: center;
  }
  .contain-title{
    font-family: MicrosoftYaHei;
    font-size: 18px;
    font-weight: bold;
    font-stretch: normal;
    letter-spacing: 1px;
    color: #1bcbb4;
  }
  .contain-left{
    align-items: center;
    cursor: pointer;
  }
  .add{
    font-family: MicrosoftYaHei;
    font-size: 14px;
    font-weight: bold;
    font-stretch: normal;
    letter-spacing: 1px;
    color: #54aef2;
    margin-left: 9px;
  }
  .nav-icon{
    color: #54aef2;
  }
  .form{
    margin-top: 15px;
  }
  .tag-page{
    margin-top: 40px;
    text-align: left;
  }
  .column{
    background-color: #ffffff;
  }
  .icon-oper{
    font-size: 5px;
    margin-right: 6px;
    margin-left: 10px;
  }
  .edit{
    color: #12c5f8;
  }
  .delete{
    color: #f8334f;
  }
  .shield{
    color: #e8c25b;
  }
  .disable{
    color: #f733a2;
  }
  .space-icon{
    margin-top: 10px;
  }
  .icon-flex{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .img-con{
    width: 100%;
  }
  .img{
    width: 100%;
    /*height: 57px;*/
  }
</style>